<script setup>
import { ref } from 'vue'
import {
  getTodayInfoAPI,
  getNewAnswerAPI,
  getNewProblemAPI,
  getTotalAnswerAPI,
  getTotalUserAPI,
  getTotalProblemAPI
} from '@/api/user'
import { onMounted, watch } from 'vue'
import * as echarts from 'echarts'
import { onBeforeMount } from 'vue'

// 今日登录
const todayLoginInfo = ref(0)
const getTodayLoginInfo = async () => {
  const res = await getTodayInfoAPI()
  todayLoginInfo.value = res.data
}

// 今日回答
const todayAnswerInfo = ref(0)
const getTodayAnswerInfo = async () => {
  const res = await getNewAnswerAPI()
  todayAnswerInfo.value = res.data
}

// 今日问题
const todayQuestionInfo = ref(0)
const getTodayQuestionInfo = async () => {
  const res = await getNewProblemAPI()
  todayQuestionInfo.value = res.data
}

// 总用户
const totalUserInfo = ref(0)
const getTotalUserInfo = async () => {
  const res = await getTotalUserAPI()
  totalUserInfo.value = res.data
}

// 总回答
const totalAnswerInfo = ref(0)
const getTotalAnswerInfo = async () => {
  const res = await getTotalAnswerAPI()
  totalAnswerInfo.value = res.data
}

// 总问题
const totalQuestionInfo = ref(0)
const getTotalQuestionInfo = async () => {
  const res = await getTotalProblemAPI()
  totalQuestionInfo.value = res.data
}

const maxToday = () => {
  return (
    Math.max(todayLoginInfo.value, todayQuestionInfo.value, todayAnswerInfo.value) +
    Math.floor(Math.max(todayLoginInfo.value, todayQuestionInfo.value, todayAnswerInfo.value) / 10)
  )
}

const maxTotal = () => {
  return (
    Math.max(totalUserInfo.value, totalQuestionInfo.value, totalAnswerInfo.value) +
    Math.floor(Math.max(totalUserInfo.value, totalQuestionInfo.value, totalAnswerInfo.value) / 10)
  )
}

onBeforeMount(() => {
  Promise.all([
    getTodayLoginInfo(),
    getTodayAnswerInfo(),
    getTodayQuestionInfo(),
    getTotalUserInfo(),
    getTotalAnswerInfo(),
    getTotalQuestionInfo()
  ])
})

onMounted(() => {
  const chartDom = document.getElementById('today')
  const myChart = echarts.init(chartDom)
  let option

  const updateTodayChart = () => {
    option = {
      title: [{ text: '今日信息', textStyle: { color: '#555', fontSize: 18 } }],
      polar: { radius: [40, '85%'] },
      radiusAxis: {
        max: maxToday(),
        axisLabel: { color: '#aaa', fontSize: 12 }
      },
      angleAxis: {
        type: 'category',
        data: ['登录人数', '新增问题', '新增回答'],
        startAngle: 75,
        axisLabel: { color: '#666', fontSize: 14 }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0, 0, 0, 0.75)',
        textStyle: { color: '#fff' }
      },
      series: {
        type: 'bar',
        data: [todayLoginInfo.value, todayQuestionInfo.value, todayAnswerInfo.value],
        coordinateSystem: 'polar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#6fcf97' },
            { offset: 1, color: '#56ccf2' }
          ]),
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          borderRadius: [5, 5, 0, 0]
        },
        label: {
          show: true,
          position: 'middle',
          formatter: '{b}: {c}',
          textStyle: { fontSize: 14, color: '#333' }
        }
      },
      animation: true
    }
    myChart.setOption(option)
  }

  const chartDom2 = document.getElementById('total')
  const myChart2 = echarts.init(chartDom2)
  let option2

  const updateTotalChart = () => {
    option2 = {
      title: [{ text: '平台信息', textStyle: { color: '#555', fontSize: 18 } }],
      polar: { radius: [40, '85%'] },
      angleAxis: {
        max: maxTotal(),
        startAngle: 75,
        axisLabel: { color: '#666', fontSize: 14 }
      },
      radiusAxis: {
        type: 'category',
        data: ['平台用户数', '总问题数', '总回答数'],
        axisLabel: { color: '#aaa', fontSize: 12 }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0, 0, 0, 0.75)',
        textStyle: { color: '#fff' }
      },
      series: {
        type: 'bar',
        data: [totalUserInfo.value, totalQuestionInfo.value, totalAnswerInfo.value],
        coordinateSystem: 'polar',
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            { offset: 0, color: '#f2994a' },
            { offset: 1, color: '#eb5757' }
          ]),
          shadowBlur: 10,
          shadowColor: 'rgba(0, 0, 0, 0.3)',
          borderRadius: [5, 5, 0, 0]
        },
        label: {
          show: true,
          position: 'middle',
          formatter: '{b}: {c}',
          textStyle: { fontSize: 14, color: '#333' }
        }
      }
    }
    myChart2.setOption(option2)
  }

  // 初始化图表
  updateTodayChart()
  updateTotalChart()

  // 监听数据变化并更新图表
  watch([todayLoginInfo, todayQuestionInfo, todayAnswerInfo], updateTodayChart)
  watch([totalUserInfo, totalQuestionInfo, totalAnswerInfo], updateTotalChart)
})
</script>

<template>
  <div class="chart-container">
    <div id="today" class="chart"></div>
    <div id="total" class="chart"></div>
  </div>
</template>

<style scoped>
.chart-container {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.chart {
  width: 500px;
  height: 500px;
  border: 2px solid #eee;
  border-radius: 15px;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
  background: linear-gradient(135deg, #f7f8fa, #eaeef2);
  padding: 10px;
}
</style>
